import { useState } from 'react'
import { message } from 'antd'
import { useBoolean, useRequest } from 'ahooks'
import { Http } from '../../../../Common/Api'
import { AttachmentList, AttachmentDetail } from '../LargeScreen/AttachmentWindow'

export const TextListLarge = ({ title, list, height, className, type }) => {
    const [ListState, { setTrue: ListStateTrue, setFalse: ListStateFalse }] = useBoolean(false)
    const [ViewState, { setTrue: ViewStateTrue, setFalse: ViewStateFalse }] = useBoolean(false)
    const [AttList, setAttList] = useState()
    const { run: getConstructionInfoManageDetail } = useRequest(Http, {
        manual: true,
        onSuccess: ({ list }) => {
            if (list.length === 0) {
                message.info('没有附件信息!')
            } else if (list.length === 1) {
                const [data] = list
                setAttList(data)
                ViewStateTrue()
            } else {
                setAttList(list)
                ListStateTrue()
            }
        },
    })
    const openFunction = data => {
        switch (type) {
            case 1:
                getConstructionInfoManageDetail({
                    url: 'getConstructionInfoManageDetail',
                    data: { InfoManageUuid: data[0] },
                })
                break
            default:
                message.info('未知类型')
                break
        }
    }
    return (
        <div className={`${className} TextListLarge`}>
            <div className="title">
                {title.map(({ uuid, title, flex, align }) => (
                    <div key={uuid} style={{ flex, justifyContent: align }}>
                        {title}
                    </div>
                ))}
            </div>
            <div className="list" style={{ height }}>
                {list.map((item, index) => (
                    <div key={`List${index}`} onClick={() => openFunction(item)}>
                        {item.map((value, key) => {
                            if (key !== 0)
                                return (
                                    <div
                                        key={key}
                                        style={{ flex: title[key - 1].flex, justifyContent: title[key - 1].align }}
                                    >
                                        {value}
                                    </div>
                                )
                            return false
                        })}
                    </div>
                ))}
            </div>
            {ListState && AttList && <AttachmentList data={AttList} className={className} Off={ListStateFalse} />}
            {ViewState && AttList && <AttachmentDetail data={AttList} className={className} Off={ViewStateFalse} />}
        </div>
    )
}
